<template>
  <div>
    <tableComponents
      :pagination="{ currentPage, pageSize, total: list.all_num }"
      @handleCurrentChange="handleCurrentChange"
      @handleSizeChange="handleSizeChange"
      @sendUserSearch="getSearch"
      :searchData="userSearchData"
      :isHaveExport="false"
      :isHaveAdd="false"
    >
      <template v-slot:table>
        <el-table
          ref="multipleTable"
          :data="list.data"
          stripe
          v-loading="loading"
          header-row-class-name="head_color"
          tooltip-effect="dark"
          style="width: 99.8%"
        >
          <el-table-column label="图片" min-width="100">
            <template slot-scope="scope">
              <el-popover placement="right" title trigger="hover">
                <img :src="scope.row.piclink" style="width: 300px" />
                <img
                  slot="reference"
                  :src="scope.row.piclink"
                  :alt="scope.row.piclink"
                  style="width: 80px"
                />
              </el-popover>
            </template>
          </el-table-column>

          <el-table-column label="加油站" min-width="140">
            <template slot-scope="scope">
              {{ scope.row.oil_gas_name || "----" }}
              <p>
                <b>地区：</b>{{ scope.row.province || "--"
                }}{{ scope.row.city || "--" }}
              </p>
            </template>
          </el-table-column>

          <el-table-column label="用户头像" min-width="80">
            <template slot-scope="scope">
              <div class="img_bor_tx">
                <img :src="$fnc.getImgUrl(scope.row.avatar)" alt />
              </div>
            </template>
          </el-table-column>

          <el-table-column label="用户信息" min-width="140">
            <template slot-scope="scope">
              <p><b>用户账号：</b>{{ scope.row.username }}</p>
              <p><b>用户昵称：</b>{{ scope.row.nickname || "----" }}</p>
              <p><b>用户手机号：</b>{{ scope.row.tel || "----" }}</p>
            </template>
          </el-table-column>

          <el-table-column label="订单" min-width="120">
            <template slot-scope="scope">
              <p><b>平台订单号：</b>{{ scope.row.oid }}</p>
              <p><b>加油站订单号：</b>{{ scope.row.oil_oid }}</p>
            </template>
          </el-table-column>

          <el-table-column label="价格" min-width="120">
            <template slot-scope="scope">
              <p><b>原价：</b>{{ scope.row.sum_price | keepTwoNum }}元</p>
              <p><b>实付：</b>{{ scope.row.money | keepTwoNum }}元</p>
            </template>
          </el-table-column>

          <el-table-column label="其他信息" min-width="120">
            <template slot-scope="scope">
              <p><b>油号：</b>{{ scope.row.oil_no || "----" }}</p>
              <p><b>枪号：</b>{{ scope.row.oil_gun || "----" }}</p>
              <p><b>加油：</b>{{ scope.row.oil_litre | keepTwoNum }}升</p>
              <p><b>支付时间：</b>{{ scope.row.pay_time | getTimeFormat }}</p>
              <p><b>支付方式：</b>{{ scope.row.pay || "----" }}</p>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </tableComponents>
  </div>
</template>
<script>
import uploadpic from "@/components/page/pic/up_pic";
import { oilCardOrderSearchData } from "@/assets/js/searchData/searchData"; //引入搜索的数据
export default {
  data() {
    return {
      userSearchData: oilCardOrderSearchData,
      loading: false,
      list: [],
      pageSize: 10,
      currentPage: 1,
      searchAll: {},
    };
  },
  components: {
    uploadpic,
  },
  created() {
    this.getNewsAll();
  },
  methods: {
    getSearch(obj) {
      this.searchAll = obj;
      this.getNewsAll(obj);
    },
    getNewsAll(data) {
      this.loading = true;
      var params = {};
      data = data || {};
      params = data;

      this.$api.getStation.oil_card_order_lists(params).then((res) => {
        if (res.data.code == 200) {
          this.list = res.data.result;
        }
        this.loading = false;
      });
    },
    handleSizeChange(val) {
      var params = this.searchAll;
      params.page = "";
      params.page_size = val;
      this.getNewsAll(params);
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      var params = this.searchAll;
      params.page = val;
      params.page_size = this.pageSize;
      this.getNewsAll(params);
    },
  },
};
</script>

<style lang="less" scoped>
</style>
